<template>
  <section class="user">
    <div class="user-container">
      <ul class="list-nav">
        <li
          v-for="item of tabNavList"
          :key="item.value"
          :class="currentTab === item.value ? 'active' : ''"
          @click="currentTab = item.value"
        >
          {{ item.lable }}
        </li>
      </ul>
      <section
        class="blog-container"
      >
        <ul
          class="blog-list"
        >
          <temp-article-item
            v-for="item of blogList"
            :key="item.id"
            :data="item"
            @modifyArticleStatus="modifyArticleStatus"
          />
        </ul>
        <div
          v-loading="loading"
          class="more-loading"
        >
          <div
            v-show="btn_moreArticle"
            class="more"
            @click="getArticleList({ more: true })"
          >
            加载更多
          </div>
        </div>
      </section>
    </div>
    <div class="author-container">
      <user-panel :target-user-id="userData && userData.userId" :page="'user'" />
    </div>
  </section>
</template>

<script>
// import component
import UserPanel from '~/components/public/UserPanel'
import tempArticleItem from '~/components/article/tempArticleItem'

export default {
  middleware: 'isSignIn',
  head() {
    return {
      title: '草稿箱'
    }
  },
  components: {
    UserPanel,
    tempArticleItem
  },
  data() {
    return {
      btn_moreArticle: true,
      loading: false,
      currentTab: 'temp',
      tabNavList: [{
        lable: '草稿',
        value: 'temp'
      }, {
        lable: '未发布',
        value: 'ready'
      }],
      blogList: [],
      pagination: 1
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  watch: {
    currentTab: function (newVal) {
      switch (newVal) {
        case 'temp':
          this.pagination = 1
          this.blogList = []
          this.getArticleList({ classify: 'TEMP' })
          break
        case 'ready':
          this.pagination = 1
          this.blogList = []
          this.getArticleList({ classify: 'READY' })
          break
      }
    }
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    async getArticleList({
      classify = 'TEMP',
      offset = this.pagination,
      limit = 20,
      more = false
    } = {}) {
      this.loading = true
      this.btn_moreArticle = false
      const data = await this.$request({
        context: this,
        method: 'get',
        url: `article/getMy/${classify}/${offset}/${limit}`
      })
      this.loading = false
      if (!data) return
      if (data.length === 0) {
        this.$message.success('没有更多啦')
        if (!more) {
          this.blogList = []
        }
        return
      }
      if (data.length === limit) {
        this.btn_moreArticle = true
      }
      this.pagination++
      if (more) {
        this.blogList = [...this.blogList, ...data]
      } else {
        this.blogList = data
      }
    },
    async modifyArticleStatus(articleId, modifyType) {
      try {
        const { status, msg } = await this.$axios.$post(`/api/article/status/${modifyType}`, {
          articleId
        }, {
          headers: {
            YDSY_HEADER_TOKEN: this.userData && this.userData.userToken
          }
        })
        if (status === 200) {
          this.pagination = 1
          this.getArticleList()
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/assets/css/user/user";
</style>
